<template>
  <div class="box">
    <h2>购物车</h2>
    <div class="list">
      <div class="shangping">
        <h3>商品1</h3>
        <p>商品信息</p>
        <button>添加到购物车</button>
      </div>
      <div class="shangping">
        <h3>商品2</h3>
        <p>商品信息</p>
        <button>添加到购物车</button>
      </div>
    </div>
    <div class="total">总价：0</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      property: 'value',
    };
  },
};
// 获取所有的产品并添加到购物车中
function addToCart(productId) {
  const product = findProduct(productId); // 找到要添加的产品
  if (product) {
    // 如果找到了产品，就将它添加到购物车中
    const quantity = getQuantity(productId); // 获取产品数量，如果没有数量，就默认为1
    addToCartInternal(product, quantity); // 将产品添加到购物车中，并更新总价
  } else {
    // 如果找不到产品，就显示一个错误信息
    alert('找不到产品！');
  }
}
// 从购物车中移除产品
function removeFromCart(productId) {
  const product = findProduct(productId); // 找到要移除的产品
  if (product) {
    // 如果找到了产品，就将它从购物车中移除，并更新总价
    removeFromCartInternal(product); // 将产品从购物车中移除，并更新总价
  } else {
    // 如果找不到产品，就显示一个错误信息
    alert('找不到产品！');
  }
}
// 在购物车中增加或减少产品数量（根据产品数量按钮的点击来判断）
function modifyQuantity(productId, quantity) {
  const product = findProduct(productId); // 找到要修改数量的产品
  if (product) {
    // 如果找到了产品，就根据点击的按钮是增加还是减少数量，并更新总价
    if (quantity > 0) {
      // 如果数量大于0，就增加数量到购物车中，并更新总价
      addToCartInternal(product, quantity); // 将产品添加到购物车中，并更新总价
    } else {
      // 如果数量小于0，就减少数量从购物车中，并更新总价（数量为负数表示减少）
      removeFromCartInternal(product, quantity); // 将产品从购物车中移除，并更新总价（数量为负数表示减少）
    }
  } else {
    // 如果找不到产品，就显示一个错误信息
    alert('找不到产品！');
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
}
.shangping {
  width: 200px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}
.total {
  padding: 20px;
  text-align: right;
}
</style>
